<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <link rel="shortcut icon" href="images/ico.png">
    <link rel="stylesheet" href="css/personal.css">
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/animation.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <style>
        #follow_btn {
            font-size: 14px;
            width: 92px;
            height: 37px;
            border-radius: 5px;
            background-color: rgb(89, 81, 165);
            color: #fff;
            text-align: center;
            line-height: 35px;
            float: right;
            position: relative;
            top: -40px;
            margin-right: 10px;
        }

        #msg_btn {
            font-size: 14px;
            width: 90px;
            height: 35px;
            border-radius: 5px;
            border: 1px solid #aaa;
            color: #aaa;
            text-align: center;
            line-height: 35px;
            float: right;
            position: relative;
            top: -40px;
        }

        #follow_btn svg,
        #msg_btn svg {
            position: relative;
            top: 4px;
        }
        #achievement a{
            display: inline-block;
            width: 320px;
            margin:15px 5px;
            height: 40px;
            border-bottom: 1px solid #eee;
            padding-left: 10px;
            font-size: 15px;
            font-weight: 700;
            color: #333;
        }
    </style>
    <script>
        var Random = Mock.Random
        // console.log(Mock.mock('@cparagraph(1, 3)'))
        Random.extend({
            constellation: function (date) {
                var constellations = ['icon01.jpg', 'icon02.jpg', 'icon03.jpg', 'icon04.jpg', 'icon05.jpg', 'icon06.jpg', 'icon07.jpg', 'icon08.jpg', 'icon09.jpg', 'icon10.jpg']
                return this.pick(constellations)
            }
        })
        // console.log(Random.constellation())
        window.onload = function () {

            //添加生成的随机数据
            Mock.mock('http://localhost:5500/api/getAllUsers', function () {
                var result = []
                var Newslength = parseInt(Math.random() * 20);

                for (var i = 0; i < Newslength; i++) {
                    // console.log("1")
                    var rndUser = Mock.mock({
                        'answer_name': Random.cname(),
                        'answer_info': Random.cparagraph(1),
                        'title': Random.cparagraph(1),
                        'text': Random.cparagraph(),
                        'logo': Random.constellation(),
                        'num|1-10000': 1000,
                        'commentnum|1-500': 100,
                    })
                    result.push(rndUser)
                }
                return result
            })

            $.ajax({
                url: 'http://localhost:5500/api/getAllUsers',
                type: 'get',
                dataType: 'json',
                success: function (data) {
                    var strHTMl = ''
                    for (var i = 0; i < data.length; i++) {
                        strHTMl += `<li>
                        <span>赞同了回答</span>
                        <h3>${data[i].title}</h3>
                        <img src="images/${data[i].logo}" alt="">
                        <span class="answer_name">${data[i].answer_name}</span>
                        <span class="answer_info">${data[i].answer_info}</span>
                        <span>${data[i].num}人也赞同了该回答</span>
                        <p style="width: 600px; height: 15px; overflow: hidden;">${data[i].text}</p>
                        <div class="agree1">
                            <svg t="1597826630853" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="3687" width="20" height="20">
                                <path d="M256.32 640l256-256 256 256z" fill="#ffffff" p-id="3688"></path>
                            </svg>
                            已赞同&nbsp;${data[i].num}</div>
                        <div class="agree2">
                            <svg t="1597826650976" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="3928" width="20" height="20">
                                <path d="M768 384l-256 256-256-256z" fill="#463a6a" p-id="3929"></path>
                            </svg>
                        </div>
                    </li>`
                    }
                    $('.deve_ul').html(strHTMl)
                },
                error: function () {
                    console.log("请求失败")
                }
            })
            document.getElementsByClassName('first')[1].onclick = function () {
                location.href = "index.html"
            }
            document.getElementsByClassName('second')[0].onclick = function () {
                location.href = "personal.html"
            }
        }


        //切换导航栏
        function dynamic() {
            removeNavclass()
            document.querySelector('#deve1').style.display = 'inline-block'
            document.querySelector('#deve2').style.display = 'none'
            document.querySelector('#deve3').style.display = 'none'
            document.querySelector('#deve4').style.display = 'none'
            document.querySelector('#deve5').style.display = 'none'
            var ul = document.querySelector('.nav_ul')
            ul.firstElementChild.classList.add("navclass")
        }
        function answer() {
            removeNavclass()
            document.querySelector('#deve1').style.display = 'none'
            document.querySelector('#deve2').style.display = 'inline-block'
            document.querySelector('#deve3').style.display = 'none'
            document.querySelector('#deve4').style.display = 'none'
            document.querySelector('#deve5').style.display = 'none'
            var ul = document.querySelector('.nav_ul')
            ul.firstElementChild.nextElementSibling.classList.add("navclass")
        }
        function text() {
            removeNavclass()
            document.querySelector('#deve1').style.display = 'none'
            document.querySelector('#deve2').style.display = 'none'
            document.querySelector('#deve3').style.display = 'inline-block'
            document.querySelector('#deve4').style.display = 'none'
            document.querySelector('#deve5').style.display = 'none'
            var ul = document.querySelector('.nav_ul')
            ul.lastElementChild.previousElementSibling.classList.add("navclass")
        }
        function collect() {
            removeNavclass()
            document.querySelector('#deve1').style.display = 'none'
            document.querySelector('#deve2').style.display = 'none'
            document.querySelector('#deve3').style.display = 'none'
            document.querySelector('#deve4').style.display = 'inline-block'
            document.querySelector('#deve5').style.display = 'none'
            var ul = document.querySelector('.nav_ul')
            ul.lastElementChild.classList.add("navclass")
        }
        function follow() {
            removeNavclass()
            document.querySelector('#deve1').style.display = 'none'
            document.querySelector('#deve2').style.display = 'none'
            document.querySelector('#deve3').style.display = 'none'
            document.querySelector('#deve4').style.display = 'none'
            document.querySelector('#deve5').style.display = 'inline-block'
            var ul = document.querySelector('.nav_ul')
            ul.lastElementChild.classList.add("navclass")
        }


        //清除导航栏样式
        function removeNavclass() {
            var ul = document.querySelector('.nav_ul')
            for (var i = 0; i < ul.children.length; i++) {
                ul.children[i].classList.remove("navclass")
            }
        }

        var timer
        //显示更多个人信息
        function showInfo() {
            var div = document.getElementById('head')
            changeHeight(div, 500, 'height')
            document.getElementById('info1').style.display = 'none'
            document.getElementById('info2').style.display = 'block'

        }
        //收起个人信息
        function hiddenInfo() {
            var div = document.getElementById('head')
            changeHeight(div, 400, 'height')
            document.getElementById('info2').style.display = 'none'
            document.getElementById('info1').style.display = 'block'
        }
    </script>
</head>

<body>
    <!-- 导航栏 -->
    <div id="Navigation"></div>
    <!-- 版心 -->
    <div class="content">
        <div class="head" id="head" style="width: 1000px; height: 400px;">
            <div id="titlepage">
                <img src="images/login_bg2.jpg" id="tp_image" alt="">
            </div>
            <div id="icon">
                <img src="images/logo.jpg" id="icon_image" alt="">
            </div>
            <div id="information">
                <h1>知遇001</h1>
                <div id="info1">
                    <p onclick="showInfo()"><svg class="more" t="1597737142479" class="icon" viewBox="0 0 1024 1024"
                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2672" width="15" height="15">
                            <path
                                d="M512 685.248l-278.624-278.624 45.248-45.248L512 594.752l233.376-233.376 45.248 45.248z"
                                fill="#aaaaaa" p-id="2673"></path>
                        </svg>查看更多个人信息</p>
                </div>
                <div id="info2">
                    <ul id="info2_ul">
                        <li>
                            <a>性别</a>
                            <span id="sex"><svg t="1599733816273" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="1888" width="30" height="30">
                                    <path
                                        d="M298.24 759.594667a225.877333 225.877333 0 1 1 319.488-319.445334 225.877333 225.877333 0 0 1-319.445333 319.445334z m30.208-30.165334A183.210667 183.210667 0 1 0 587.52 470.314667a183.210667 183.210667 0 0 0-259.114667 259.114666z"
                                        fill="#55585f" p-id="1889"></path>
                                    <path
                                        d="M602.624 455.253333a21.333333 21.333333 0 0 1-2.474667-27.221333l2.474667-2.986667 93.184-93.141333a21.333333 21.333333 0 0 1 32.64 27.221333l-2.474667 2.986667-93.184 93.141333a21.333333 21.333333 0 0 1-30.165333 0z"
                                        fill="#55585f" p-id="1890"></path>
                                    <path
                                        d="M567.68 317.184l0.554667-3.84a21.333333 21.333333 0 0 1 21.845333-16.384l3.84 0.554667 134.698667 31.744 31.744 134.698666a21.333333 21.333333 0 0 1-40.32 13.44l-1.194667-3.626666-25.728-109.056-109.013333-25.685334a21.333333 21.333333 0 0 1-16.256-18.090666l-0.170667-3.754667z"
                                        fill="#55585f" p-id="1891"></path>
                                </svg>
                                <!-- <svg t="1599733967649" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" 
                            p-id="2149" width="30" height="30"><path d="M733.866667 300.8a224 224 0 1 1-316.8 316.8A224 224 0 0 1 733.866667 300.8z m-30.165334 30.165333a181.333333 181.333333 0 1 0-256.426666 256.426667 181.333333 181.333333 0 0 0 256.426666-256.426667z" 
                            fill="#55585f" p-id="2150"></path><path d="M432.170667 602.496a21.333333 21.333333 0 0 1 2.474666 27.221333l-2.474666 2.986667-105.6 105.557333a21.333333 21.333333 0 0 1-32.64-27.221333l2.474666-2.944 105.6-105.6a21.333333 21.333333 0 0 1 30.165334 0z" 
                            fill="#55585f" p-id="2151"></path><path d="M484.949333 760.917333a21.333333 21.333333 0 0 1-27.221333 32.64l-2.944-2.474666-211.2-211.2a21.333333 21.333333 0 0 1 27.221333-32.64l2.986667 2.474666 211.2 211.2z" 
                            fill="#55585f" p-id="2152"></path></svg> -->
                            </span>
                        </li>
                        <li>
                            <a>职业</a>
                            <span>程序员</span>
                        </li>
                        <li>
                            <a>个人简介</a>
                            <span>勤勤恳恳兢兢业业</span>
                        </li>
                        <li>
                            <p onclick="hiddenInfo()"><svg t="1599728101182" class="icon" viewBox="0 0 1024 1024"
                                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2611" width="15" height="15">
                                    <path
                                        d="M745.376 662.624L512 429.248l-233.376 233.376-45.248-45.248L512 338.752l278.624 278.624z"
                                        fill="#aaaaaa" p-id="2612"></path>
                                </svg>收起</p>
                        </li>
                    </ul>
                </div>
                <div id="msg_btn">
                    <svg t="1599740996276" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="7433" width="18" height="18">
                        <path
                            d="M887.296 134.144H136.704c-47.104 0-85.504 38.4-85.504 85.504v585.216c0 47.104 38.4 85.504 85.504 85.504h750.592c47.104 0 85.504-38.4 85.504-85.504V219.648c0-47.616-38.4-85.504-85.504-85.504z m12.8 235.52c0 4.096-2.048 7.68-5.632 9.728L517.12 572.928c-3.072 1.536-6.656 1.536-9.728 0L129.536 379.392c-3.584-2.048-5.632-5.632-5.632-9.728v-36.352c0-7.68 7.68-12.8 14.848-9.728l369.152 155.648c2.56 1.024 5.632 1.024 8.192 0l369.152-155.648c7.168-3.072 14.848 2.048 14.848 9.728v36.352z"
                            p-id="7434" fill="#aaaaaa"></path>
                    </svg>
                    发私信</div>
                <div id="follow_btn">
                    <svg t="1599740553681" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="1045" width="18" height="18">
                        <path
                            d="M848 474H550V152h-76v322H176c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h298v322h76V550h298c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
                            p-id="1046" fill="#ffffff"></path>
                    </svg>
                    关注</div>
                

            </div>
        </div>
        <div class="main_left">
            <div class="nav">
                <ul class="nav_ul">
                    <li onclick="dynamic()" class="navclass">动态</li>
                    <li onclick="answer()">回答</li>
                    <li onclick="text()">文章</li>
                    <li onclick="more()">
                        <div class="press">
                            <a class="nav_more" href="#">更多<svg t="1597745702277" class="icon" viewBox="0 0 1024 1024"
                                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4017" width="15" height="15">
                                    <path
                                        d="M512 685.248l-278.624-278.624 45.248-45.248L512 594.752l233.376-233.376 45.248 45.248z"
                                        fill="#181818" p-id="4018"></path>
                                </svg></a>
                            <div class="nav_con">
                                <a href="#" onclick="collect()">收藏&nbsp;<span id="collect_num">3</span></a>
                                <a href="#" onclick="follow()">关注&nbsp;<span id="follow_num">0</span></a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div id="deve1">
                <ul class="deve_ul">
                </ul>
            </div>
            <div id="deve2">
                <ul>
                    <li>
                        <span>回答了问题</span>
                        <h3>医生在医院见到过怎样奇葩的人？</h3>
                        <img src="images/01.jpg" alt="">
                        <span class="answer_name">急诊狼人</span>
                        <span class="answer_info">急诊医学硕士/中毒救治（百草枯、有机磷、笑气）/丁香园达人</span>
                        <span>3,146人也赞同了该回答</span>
                        <p style="width: 600px; height: 15px; overflow: hidden;">
                            一位28岁的轻年，晚上快十一点了来看急诊，后面跟着他的母亲。我问“你哪里不舒服？”
                            他母亲回复我，“他吃了百草枯。”从进门他就表现的很坦然，进门诊后，
                            他就坐在检查床上不说话。我问喝了多久了，喝了多少，也不理我。但是看他的样子，
                            是没喝，因为他妈妈也很淡定。我问洗胃了吗，他也不回答。我拿出尿管，递给他，说，
                            “去取点尿化验一下。”他拿着尿管，转身离开，他妈妈随着他离开，应该是去厕所留尿了吧！
                            他离开后，我和门诊的值班的护士说，“他肯定没喝。”护士笑了笑，没回答我，继续看她的小说。
                            这个病人是直接来的急诊中毒门诊，不是去急诊分诊台，也就是说他不着急，都能找到急诊中毒科，
                            毕竟门诊对外人很难找。几分钟后，他拿了一管尿进来，护士接过，加入试剂，我站在旁边检测结果。
                            两种试剂混合导入尿液，尿液变色。而病人看到尿液变色后，明显的泄了口气，有种如释重负的感觉。
                            而我看到尿液变色后，就把病人的妈妈引出门诊，告诉她，她儿子的病情很重，需要洗胃，血液净化，
                            风险很大，说完后。病人的妈妈回答我，要和她儿子商量一下。商量也没出去，就在门诊。
                            病人很平和的拒绝了所有治疗，除了要住院观察外。我又在病人面前说了一遍严重性，没有。
                            给他找了个床自生自灭吧。夜班下班前，病人来要了请假条，让他妈妈送到单位去。此后数天，
                            检查也没事，嘴也没烂，一切很好。每天查房他也不说话，就是在看手机。因为很特别，大家很关注他吧。
                            有天夜班，我在科室里问，“为什么他能这样呢？”搭班的还是那个喜欢看小说的护士，她回答我，
                            “你不知道吗？那个病人为了请假，吃了百草枯。为了能检测出来，他真的吃了。为了控制吃百草枯的量，
                            他用针管测了百草枯量，保证少于致死量。为了让百草枯不腐蚀口腔，他用针管吸了百草枯注射进胶囊里吃进去的。
                            所以…”听完这一通解释，我你*，这是什么智商。为了请假还能这样！这病人住满21天出院，
                            据听说他又用同样的方法来住院请假被拒绝了。是不是很神奇，错，还有神人。我一个同学学乳腺外的，男生。…，
                            不说了，怕有人学。
                        </p>
                        <div class="agree1">
                            <svg t="1597826630853" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="3687" width="20" height="20">
                                <path d="M256.32 640l256-256 256 256z" fill="#ffffff" p-id="3688"></path>
                            </svg>
                            已赞同&nbsp;664</div>
                        <div class="agree2">
                            <svg t="1597826650976" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="3928" width="20" height="20">
                                <path d="M768 384l-256 256-256-256z" fill="#463a6a" p-id="3929"></path>
                            </svg>
                        </div>
                    </li>
                </ul>
            </div>
            <div id="deve3">
                <ul>
                    <li>
                        <span>关注了问题</span>
                        <h3>如果你是闪耀暖暖里的暖暖，你会怎么做？</h3>
                    </li>
                </ul>
            </div>
            <div id="deve4">
                <ul>
                    <li>
                        <span>收藏</span>
                        <h3>如果你是闪耀暖暖里的暖暖，你会怎么做？</h3>
                    </li>
                </ul>
            </div>
            <div id="deve5">
                <ul>
                    <li>
                        <span>关注</span>
                        <h3>如果你是闪耀暖暖里的暖暖，你会怎么做？</h3>
                    </li>
                </ul>
            </div>
        </div>
        <div class="main_right">
            <div id="achievement">
                <a>个人成就</a>
                <div>
                    <p>
                        
                    </p>
                </div>
            </div>
            <div class="bottom">
                <ul>
                    <li>
                        <span>关注了</span>
                        <h3>3</h3>
                    </li>
                    <li>
                        <span>关注者</span>
                        <h3>5</h3>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        $("#Navigation").load("Navigation.html");
    </script>
</body>

</html>